<template>
	<el-aside class="app-slide" width="180px">
		<el-menu
			:default-active="menuActive"
			unique-opened
			background-color="#313139"
			text-color="#fff"
			active-text-color="#ffd04b"
			class="app-slide__menu"
		>
			<template v-for="(item, index) in menuList">
				<el-menu-item v-if="!item.child" :key="index" :index="item.id" @click="onMenuClick(item)">
					<i :class="item.icon"></i>
					<span slot="title">{{item.title}}</span>
				</el-menu-item>
				<el-submenu v-else :key="index" :index="item.id">
					<template slot="title">
						<i :class="item.icon"></i>
						<span>{{item.title}}</span>
					</template>
					<el-menu-item-group class="fx-menu-collapse-container">
						<el-menu-item
							v-for="(childItem, childIndex) in item.child"
							:key="childIndex"
							:index="childItem.id"
							@click="onMenuClick(childItem)"
						>{{childItem.title}}</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
			</template>
		</el-menu>
	</el-aside>
</template>
<script>
import MENU_LIST_CONFIG from '@/config/menu_list_config.js'
export default {
	name: 'app-menu',
	data () {
		return {
			menuList: MENU_LIST_CONFIG,
			menuActive: ''
		}
	},
	created () {
		this.setCurrentMenuActive()
	},
	methods: {
		onMenuClick (item) {
			if (this.$route.name !== item.path) {
				this.$fxLogger.menuInfo(item.title)
				this.$router.push(item.path)
			}
		},
		setCurrentMenuActive () {
			const pathName = this.$route.name
			const menuListFlatten = this.$fxUtils.arrFlatten(this.menuList, item => {
				return item.child
			})
			this.menuActive = (menuListFlatten.find(item => {
				return item.path === pathName
			}) || {}).id || 'basic-organ'
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
.app-slide {
	text-align: left
	&__menu {
		height: 100%
	}
}
.fx-menu-collapse-container {
	overflow: hidden
}
</style>
